<template>
	<view class="p2">

		<view class="flex a-c j-c" style="padding-top: 20px;">
			<image v-if="set_find.website_logo" style="width: 80px;border-radius: 15rpx;height: 80px;"
				:src="set_find.website_logo|getImg"></image>

		</view>
		<view class="flex a-c j-c" style="padding-top: 20px;">
			<text class="w800">{{set_find.title}}</text>
		</view>

		<scroll-view scroll-x="true" class="pt3">
			<view class="flex">
				<view v-for="(item,index) in ad_list" :key="index" style="width: 200px;margin: 10rpx;">
					<image style="width: 200px;height: 350px;" :src="item.img|getImg"></image>
				</view>
			</view>

		</scroll-view>

		<view class="flex a-c j-c" style="padding-top: 30px;">
			<button @click="on_dow" class="but-i" type="default">立即下载</button>
		</view>

		<view class="flex a-c j-c pt3 c_7 but-t">
			{{set_find.website_but}}
		</view>
		<view class="flex a-c j-c pt1 c_7 but-t">
			{{set_find.website_v}}
		</view>



		<view class="" v-if="shows">
			<view class="mark"></view>
			<view class="pop-up-app">
				<view>
					<image class="pop-up-arrow" src="http://www.tcomcom.com/ID1267/images/click_btn.png"></image>
				</view>
				<view class="flex a-c j-c" style="position: fixed;top: 200px;left: 80px">
					<view class="flex a-c j-c sequence cff">1</view>
					<text class="ml1 cff">点击右上角</text>
					<image class="ml1" style="width: 30px;height: 30px;" src="../../../static/gg.png"></image>
					<text class="ml1 cff">打开菜单</text>
				</view>
				<view class="flex a-c j-c" style="position: fixed;top: 250px;left: 80px">
					<view class="flex a-c j-c sequence cff">2</view>
					<text class="ml1 cff">选择</text>
					<image class="ml1" style="width: 30px;height: 30px;" :src="icon_img"></image>

					<text class="ml1 cff">{{name}}</text>
				</view>


			</view>

		</view>



	</view>
</template>

<script>
	import $plugin from '@/common/plugin/videoappdownload/videoappdownload.js';
	export default {
		components: {

		},
		data() {
			return {
				ad_list: [],
				set_find: "",
				icon_img: "../../../static/safari.png",
				name: "用Safari打开下载",
				shows: false

			}
		},
		onLoad() {


			var ua = navigator.userAgent.toLowerCase();
			if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
				this.icon_img = "../../../static/safari.png";
				this.name = "用Safari打开下载"
			} else {
				this.icon_img = "../../../static/an.png";
				this.name = "在浏览器中打开"
			}
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.shows = true
			}
			 
			if (ua.indexOf('qq') > -1 ) {
				this.shows = true
			}


			this.init();
		},
		created() {
			uni.hideTabBar()
		},
		methods: {

			init() {
				this.Http.post('/plugin.php/videoappdownload/api/Settings/index').then(ret => {
					if (ret.status == 200) {
						let set_find = ret.data.set_find
						this.set_find = set_find
						uni.setNavigationBarTitle({
							title: this.set_find.title
						})
						uni.hideTabBar()
						this.ad_init();
					}
				})
			},
			on_dow() {
				const ua = navigator.userAgent;
				if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) {
					this.openNewWindow(this.set_find.app_android_url);
				} else {
					this.openNewWindow(this.set_find.app_ios_url);

				}
			},
			openNewWindow(url) {
				if (!url) {
					uni.showToast({
						title: "请先设置下载地址",
						icon: "none"
					})
					return
				}

				window.open(url, '_blank', '');
			},
			async ad_init() {
				let that = this;
				let requestParams = {
					page: 1,
				};
				const ret = await this.Http.post('/plugin.php/videoappdownload/api/Ad/lists', requestParams)
				if (ret.status == 200) {
					let list = ret.data.list.list.data;
					this.ad_list = list;


				}
			},

		}
	}
</script>

<style lang="scss">
	.mark {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99;
		left: 0;
		width: 750rpx;
		height: 100vh;
	}

	.sequence {
		width: 20px;
		height: 20px;
		border-radius: 96rpx;
		background-color: #4773FF;
	}

	.pop-up-app {
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.pop-up-arrow {
		width: 90px;
		height: 150px;
		top: 20px;
		right: 20px;
		position: fixed;

	}


	.but-i {
		background-color: #4773FF;
		width: 600rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 16px;
	}


	page {

		background-image: linear-gradient(to right, #fff, #F1F1FD);
	}

	.but-t {
		font-size: 14px;
		letter-spacing: 2px;
	}
</style>